<template>
  <div class="box app-container">
    <el-row class="line">
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="任务名">
            <el-input v-model="formInline.user" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="周期">
            <el-date-picker
              v-model="formInline.value"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" class="content" v-for="(item,index) in dataList" :key="index">
        <el-card shadow="hover" class="vab-colorful-card " :body-style="{padding:'0',height:'260px'}">
          <div style="height: 100%;">
            <div class="head-chart">
              <i class="ri-task-line icon"></i>
              <span class="icon-chart">任务编号 - {{item.number}}</span>
              <el-tag type="danger" size="mini" v-if="item.isClose">已停用</el-tag>
              <el-tag type="success" size="mini" v-else>已启用</el-tag>
            </div>
            <div class="box-content">
              <el-image
                :src="robot"
                fit="cover"
              ></el-image>
              <div class="task-item-bottom">
                <span>Ip: {{item.ip}}</span>
                <el-button type="primary" circle v-if="item.isClose" @click="item.isClose=!item.isClose"><i class="el-icon-video-play"></i></el-button>
                <el-button type="warning" circle v-else @click="item.isClose=!item.isClose"><i class="el-icon-video-pause"></i></el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="content">
        <el-card shadow="hover" class="vab-colorful-card " :body-style="{padding:'0',height:'260px',cursor:'pointer'}" @click.native="add">
          <div class="add flex">
            <i class="ri-add-circle-line"></i>
            <p>添加任务</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import robot from '@/assets/images/robot.png'
export default {
  name: 'index',
  data() {
    return {
      formInline: {
        user: '',
        value: ''
      },
      robot:robot,
      dataList:[
        {
          number:'31000019720',
          isClose:false,
          ip:'103.92.204.192',
        },
        {
          number:'63000019950',
          isClose:true,
          ip:'103.92.204.192'
        },
        {
          number:'42000020130',
          isClose:false,
          ip:'103.92.204.192'
        },
        {
          number:'15000019750',
          isClose:true,
          ip:'103.92.204.192'
        },
        {
          number:'54000020070',
          isClose:true,
          ip:'103.92.204.192'
        },
      ]
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    add(){
      this.$message({
        message: '模拟添加成功',
        type: 'success'
      });
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  margin-bottom: 40px;
  .line {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 20px 20px 0 20px;
    margin-bottom: 20px;
    border: 1px solid #ebeef5;
    .el-form-item {
      margin-right: 20px;
      ::v-deep.el-date-editor {
        width: 235px;
      }
      .el-input {
        width: 220px;
      }
    }
    ::v-deep.el-form-item__label {
      font-weight: 400;
    }
  }
  .content {
    margin-bottom: 20px;
    .head-chart {
      display: flex;
      padding: 20px 20px 20px 20px;
      align-items: center;
      border-bottom: 1px solid #E4E7ED;
      .icon {
        font-size: 16px;
        margin-right: 3px;
      }
      .icon-chart {
        font-size: 14px;
        margin-right: 3px;
      }
    }
    .box-content {
      padding: 20px 20px 20px 20px;
      .el-image {
        display: block;
        width: 150px;
        margin: 0 auto 20px auto;
      }
      .task-item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 20px;
        text-align: right;
        border-top: 1px solid #ebeef5;
        .el-button{
          padding: 0px!important;
          i{
            font-size: 28px;
          }
        }
        span {
          font-size: 14px;
        }
      }
    }
    .add{
      height: 100%;
      flex-direction: column;
      text-align: center;
      i{
        font-size: 30px;
        color: #1890ff;
        cursor: pointer;
      }
      p{
        font-size: 14px;
        color: #1890ff;
      }
    }
  }
}
</style>
